.price {
  color: var(--price-color);
  &::before {
    @extend %__priceBefore;
  }
}

.imageSrc {
  background-image: url("../../shared/assets/eatIn.png");
}
.recycle_device_image {
  position: relative;
  width: 630rpx;
  height: 600rpx;
  /* padding: 40rpx 0; */
  text-align: center;
  margin: 0 auto;
  border-radius: 50%;

  background-image: url("../../shared/assets/eatIn.png");
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center center;

  background-color: #188ffe;
}

.circle {
  position: absolute;
  width: calc(100% - 20rpx); /* 减去边框的大小 */
  height: calc(100% - 20rpx); /* 减去边框的大小 */
  border-radius: 50%;
  opacity: 0;
  border: 10rpx solid #87c5fe;
}

.circle:first-child {
  animation: circle-opacity 2s infinite;
  animation-delay: 0.3s;
}

.testbg {
  background-color: #188ffe;
  // animation: circle-opacity 2s;
  animation-delay: 0.3s;
  animation-duration: 2s;
  animation-name: circle-opacity;
}
// .circle:nth-child(2) {
//   animation: circle-opacity 2s infinite;
//   animation-delay: 0.8s;
// }

@keyframes circle-opacity {
  from {
    opacity: 1;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}

/* 变小 变大 正常 */
@keyframes scaleAnimation {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
}

@keyframes borderAnimation {
  0%,
  100% {
    border: 2px solid #e10600;
    opacity: 1;
  }
  50% {
    border-width: 0px;
    opacity: 0.5;
  }
}

.scale-animation {
  animation: scaleAnimation 2s;
}

.border-animation {
  animation: borderAnimation 3s infinite;
}
